<template>
  <div>
    <el-input class="ssk" v-model="aaaForm.parkname" placeholder="车位名称"></el-input>
    <el-input class="ssk" v-model="aaaForm.orderpay" placeholder="应缴金额"></el-input>
    <el-select class="ssk" v-model="aaaForm.parkstatus" placeholder="缴费状态">
      <el-option v-for="item in oStatus" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="getData()">查询</el-button>
    <el-button type="primary" icon="el-icon-search">全量导出</el-button>
    <el-button type="primary" icon="el-icon-search" @click="chongZhi()">重置</el-button>
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="parkname" label="车位名称" width="180">
      </el-table-column>
      <el-table-column prop="parkpay" label="车位金额">
      </el-table-column>
      <el-table-column prop="startdate" label="开始时间">
      </el-table-column>
      <el-table-column prop="enddate" label="结束时间">
      </el-table-column>
      <el-table-column prop="orderpay" label="应缴金额">
      </el-table-column>
      <el-table-column label="缴费状态" width="180">
        <template slot-scope="scope">
          <el-tooltip :content="'parkstatus: ' + scope.row.parkstatus" placement="top">
            <el-switch class="switchStyle" v-model="scope.row.parkstatus" :active-value=2 :inactive-value=1
              active-text="已缴费" inactive-text="未缴费" @change="setType(scope.row)">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" @click="bianJ(scope.row)">车位缴费</el-button>
          <el-button icon="el-icon-delete" @click="xiangQing(scope.row)">缴费详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :page="queryInfo.currPage" :rows="queryInfo.pageNum" :totalCount="totalCount" @changeRow="goRows"
      @changePage="setPage"></Pagination>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
    <el-form :model="adminForm" ref="adminForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="开始时间">
        <el-date-picker v-if="title=='通知缴费'" type="date" v-model="adminForm.startdate"></el-date-picker>
        <el-date-picker v-else type="date" v-model="adminForm.startdate" :disabled="true"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-if="title=='通知缴费'" type="date" v-model="adminForm.enddate"></el-date-picker>
        <el-date-picker v-else type="date" v-model="adminForm.enddate" :disabled="true"></el-date-picker>
      </el-form-item> <el-form-item label="应缴金额">
        <el-input v-if="title=='通知缴费'" v-model="adminForm.parkpay"></el-input>
        <el-input v-else v-model="adminForm.parkpay" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="缴费状态">
        <el-select v-if="title=='通知缴费'" v-model="adminForm.parktype" placeholder="请选择">
          <el-option v-for="(item, index) in  oStatus" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-else v-model="adminForm.parktype" placeholder="请选择" :disabled="true">
          <el-option v-for="(item, index) in  oStatus" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="通知缴费">
        <el-input v-if="title=='通知缴费'" textera v-model="adminForm.note"></el-input>
        <el-input v-else textera v-model="adminForm.note" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="title == '通知缴费'" @click="handleClose()">取消</el-button>
        <el-button v-else-if="title == '缴费详情'" type="primary" @click="handleClose()">取消</el-button>
        <el-button v-if="title == '通知缴费'" type="primary" @click="bianjiTrue()">缴费</el-button>
        <el-button v-if="title == '通知缴费'" type="primary" @click="chongZhi()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  </div>

</template>
<script>
import Pagination from '@/components/pagination/index.vue';
export default {
  data() {
    return {
      queryInfo: {
        currPage: 0,
        pageNum: 10,
        parkname: '',
        orderpay: '',
        orderstatus: ''
      },
      souSuo: {},
      isOk: true,
      totalCount: 0,
      adminForm: [],
      aaaForm:[],
      title: '',
      dialogVisible: false,
      tableData: [],
      oStatus: [
        {
          label: '未缴费',
          value: 1
        },
        {
          label: '已缴费',
          value: 2
        },
      ],
    }
  },
  methods: {
    getData() {
      this.$Axios({
        url: '/parking/getParkOrder',
        method: 'get',
        data: this.queryInfo,
        success: (res) => {
          this.tableData = []
          this.totalCount = ''
          this.tableData = res.data
          this.totalCount = res.total;
          console.log(this.tableData)
        }
      })
    },
    chongZhi() {
      this.adminForm = []
    },
    goRows(res) {
      this.queryInfo.pageNum = res;
      this.getData();
    },
    sousuoCz() {
      this.souSuo = {}
    },
    setPage(res) {
      this.queryInfo.currPage = res;
      this.getData();
    },
    setType(res) {
      this.$Axios({
        url: '/parking/payParkOrder',
        method: 'post',
        data: {
          u_id: res.id,
          orderstatus: res.parkstatus,
          token: sessionStorage.getItem("token"),
        },
        headers: {
          token: sessionStorage.getItem("token"),
        },
        success: (res) => {
          this.$message('通知缴费成功')
          this.getData()
        }
      })
    },
    bianJ(row) {
      this.adminForm = []
      this.adminForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.title = '通知缴费'
    },
    xiangQing(row){
      this.adminForm = []
      this.adminForm = row
      this.dialogVisible = true
      this.title = '缴费详情'
    },
    bianjiTrue() {
      this.$Axios({
        url: '/parking/editParkOrder',
        method: 'post',
        data: {
          u_id: this.adminForm.id,
          startdate:this.adminForm.startdate.split(['T'])[0]+"+"+'12:00',
          enddate:this.adminForm.enddate.split(['T'])[0]+"+"+'12:00',
          orderpay:this.adminForm.orderpay,
          orderstatus: this.adminForm.orderstatus,
          note:this.adminForm.note,
        },
        headers: {
          token: sessionStorage.getItem("token")
        },
        success: (res) => {
          this.$message('缴费成功')
          this.dialogVisible = false
          this.getData()
        }
      })
    },
    chongZhi() {
      this.adminForm = {}
    },
    handleClose() {
      this.dialogVisible = false
    },
  },
  components: {
    Pagination
  },
  created() {
    this.getData();
    let token = sessionStorage.token;
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}

.ssk {
  width: 300px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-table {
  text-align: center;
}
</style>